<template>
    <el-dialog
            title="添加用户"
            :close-on-click-modal="false"
            :visible="visible"
            :before-close="handleClose"
            append-to-body
    >
        <el-form
                label-width="100px"
                class="demo-ruleForm"
                :rules="rulesUser"
                ref="addUserForm"
                :model="roleUser"
        >
            <el-form-item label="用户" prop="user">
                <el-select
                        v-model="roleUser.user"
                        filterable
                        remote
                        reserve-keyword
                        placeholder="请输入关键词"
                        :remote-method="getSimpleUser"
                        @change="changUser"
                >
                    <el-option
                            v-for="item in simpleUserList"
                            :key="item.id"
                            :label="item.alias"
                            :value="item.id"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
<!--            <el-form-item label="部门" prop="dept_id" v-if="currUser.user_dept_info_list">-->
<!--                <el-radio-group v-model="roleUser.dept_id">-->
<!--                    <el-radio :label="dept.id" v-for="(dept,index) in currUser.user_dept_info_list" :key="index">{{dept.name}}</el-radio>-->
<!--                </el-radio-group>-->
<!--            </el-form-item>-->
            <el-form-item>
                <el-button type="primary" @click="addUserRole">添加</el-button>
                <!--                    <el-button @click="resetForm('ruleForm')">重置</el-button>-->
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script>
    import api from "@/api/index";
    import eventBus from "../../utils/eventBus";
    export default {
        props: {
            id: {
                type: Number,
                default: 0
            },
            visible: {
                type: Boolean,
                required: true,
                default: false
            }
        },
        data() {
            return {
                roleUser: {user:undefined,group:this.id},
                simpleUserList: [],
                rulesUser: {
                    user_id: [
                        {
                            required: true,
                            message: "请输入用户",
                            trigger: "blur"
                        }
                    ]
                },
                currUser:{}
            };
        },
        created() {
        },
        computed:{
            api(){
                const api = require(`@/api/addressBook/group/index`);
                return api.default
            }
        },
        methods: {
            changUser(user){
                this.roleUser.dept_id = undefined
                this.simpleUserList.map(item=>{
                    if(item.id==user){
                        this.currUser = item
                    }
                })
            },
            handleClose() {
                this.$emit("update:visible", false);
            },
            getSimpleUser(val) {
                api.getSimpleUser(val).then(res => {
                    if (res.data.code === 0) {
                        this.simpleUserList = res.data.value;
                    }
                });
            },
            addUserRole() {
                this.$refs.addUserForm.validate(valid => {
                    if (valid) {
                        this.api
                            .bookaddressGroupsAdd(this.roleUser)
                            .then(res => {
                                this.msgSuccess("添加成功!");
                                this.$emit("reloadList");
                                this.handleClose();
                                eventBus.$emit("reloadGroupsList")
                            });
                    } else {
                        return false;
                    }
                });
            }
        }
    };
</script>
